<!-- 
 @Author: LW  
 @Date: 2021-01-15 14:25:19  
 @function: 视频播放功
 -->
<template>
  <div>
    <video
      id="myVideo"
      class="video-js vjs-default-skin vjs-big-play-centered vjs-16-9"
      width="100%"
      height="100%"
    ></video>
  </div>
</template>
<script>
export default {
  name: "Vedio",
  props: ["vedioPar"],
  watch: {
    vedioPar: {
      handler: function(val, oldval) {
        if (val != oldval || val.url != this.url) {
          this.url = val.url;
          if (this.player == null) {
            this.initVideo();
          }
          this.player.pause();
          this.player.currentTime(0);
          this.player.src({ src: this.url });
        } else {
          //销毁video实例，避免出现节点不存在 但是flash一直在执行,也避免重新进入页面video未重新声明
          this.player.pause();
          this.player.dispose();
          this.player = null;
        }
      },
      deep: true
    }
  },
  data() {
    return {
      player: null,
      url: null
    };
  },
  mounted() {
    this.initVideo();
    this.url = this.vedioPar.url;
    this.player.src({ src: this.url });
      this.$emit("handVedio", this.player);
  },
//   beforeDestroy() {
//     //销毁video实例，避免出现节点不存在 但是flash一直在执行,也避免重新进入页面video未重新声明
//     this.player.dispose();
//     this.player = null;
//   },
  methods: {
    initVideo() {
      var that = this;
      //此处初始化的调用，我放在了获取数据之后的方法内，而不是放在钩子函数mounted
      //页面dom元素渲染完毕，执行回调里面的方法
      this.player = this.$video(
        document.getElementById("myVideo"),
        {
          controls: true, //控制条：boolean
          preload: "none", //预加载：string；'auto'|'true'|'metadata'|'none'
          //poster: 'source/suoluetu.jpg',//预览图：string
          autoplay: true, //自动播放：boolean
          loop: true, //循环：boolean
          muted: true, //静音：boolean
          controlBar: {
            muteToggle: false,
            volumeMenuButton: false //静音按钮
          }
        },
        function onPlayerReady() {
          var vdthis = this;
          that.$video.log("ok");
          this.on("ended", function() {
            that.$video.log("ended");
          });
          this.on("timeupdate", function(e) {
            that.$video.log(vdthis.currentTime());
          });
        }
      );
    }
  }
};
</script>
 <style lang="scss" scoped>
</style>
